<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of datas"
    [class.selected]="hero === selectedData"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf="selectedHero">

  <h2>{{selectedData.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedData.id}}</div>
  <div>
    <label for="hero-name">Hero name: </label>
    <input id="hero-name" [(ngModel)]="selectedData.name" placeholder="name">
  </div>

</div>